<template>
  <div class="websiteInformation">
      <Nav></Nav>
      <div class="writing_right">
          <div class="websiteInformationTitleList">
              <div class="TitleList_padding">
                  <div class="TitleList_top">
                      <div class="parametersettings_content_top">
                          <div class="content_top_logo"><img src="@a/img/logo2.png" /></div>
                          <span class="content_top_span1"></span>
                          <div class="content_top_icon"><img src="@a/img/sv13.svg" /></div>
                          <span class="content_top_span2"></span>
                          <div class="content_top_logo"><img :src="demo_logo" /></div>
                      </div>
                      <div class="TitleList_top_title">
                          <span>AI-DOG</span>与<span>[{{ demo_name }}]</span>建立数据通道
                      </div>
                  </div>
              </div>

              <div class="emailmo_step">
                  <div class="emailmo_step_list on">
                      <div class="step_list_icon">1</div>
                      <div class="step_list_title">安装插件</div>
                  </div>
                  <span></span>
                  <div class="emailmo_step_list on">
                      <div class="step_list_icon">2</div>
                      <div class="step_list_title">网站信息</div>
                  </div>
                  <span></span>
                  <div class="emailmo_step_list">
                      <div class="step_list_icon">3</div>
                      <div class="step_list_title">添加成功</div>
                  </div>
              </div>

              <div class="parametersettings_content">
                  <div class="parametersettings_content_bottom">
                      <div class="Edit_content">
                          <div class="Edit_content_list">
                              <div class="content_list_dd">
                                  站点名称
                                  <el-tooltip class="item" effect="dark" content="请输入您的网站名称" placement="top-start">
                                      <el-button><img src="@a/img/sv12.svg" /></el-button>
                                  </el-tooltip>
                              </div>
                              <div class="content_list_dt">
                                  <el-input
                                  placeholder="如AI写作官网"
                                  ref="inputRef"
                                  v-model="info.name"
                                  >
                                  </el-input>
                              </div>
                          </div>
                          <div class="Edit_content_list siteUrl">
                              <div class="content_list_dd">
                                  网站地址
                                  <el-tooltip class="item" effect="dark" content="只需要输入网站域名部分即可,如http://www.ai-dog.net 输入:www.ai-dog.net就可以了" placement="top-start">
                                      <el-button><img src="@a/img/sv12.svg" /></el-button>
                                  </el-tooltip>
                              </div>
                              <div class="content_list_dt">
                                <el-input placeholder="如www.baidu.com" v-model="info.website" class="input-with-select" @input="handleInput">
                                  <el-select v-model="info.is_https" slot="prepend" placeholder="请选择">
                                    <el-option label="http://" value="0"></el-option>
                                    <el-option label="https://" value="1"></el-option>
                                  </el-select>
                                </el-input>
                                <div class="siteUrl_hint">请注意区分http还是https</div>
                              </div>
                          </div>
                          <div v-show="!isShow">
                            <div class="Edit_content_list">
                              <div class="content_list_dd">
                                栏目接口地址
                                <el-tooltip class="item" effect="dark" content="栏目接口地址用于获取栏目列表,用于在发布文章的时候选择发布到该站点下的哪个栏目,接口返回的内容为select标签" placement="top-start">
                                  <el-button><img src="@a/img/sv12.svg" /></el-button>
                                </el-tooltip>
                              </div>
                              <div class="content_list_dt">
                                <el-input
                                    placeholder="请填写发接口url，不要加域名，例：/add.php"
                                    v-model="info.column_interface"
                                    clearable>
                                </el-input>
                              </div>
                            </div>
                            <div class="Edit_content_list">
                              <div class="content_list_dd">
                                发布接口地址
                                <el-tooltip class="item" effect="dark" content="用于提交文章数据的接口地址" placement="top-start">
                                  <el-button><img src="@a/img/sv12.svg" /></el-button>
                                </el-tooltip>
                              </div>
                              <div class="content_list_dt">
                                <el-input
                                    placeholder="请填写的接口url，不要加域名，例：/add.php"
                                    v-model="info.publishing_interface"
                                    clearable>
                                </el-input>
                              </div>
                            </div>

                            <div class="Edit_content_list fstart">
                              <div class="content_list_dd">
                                Header
                                <el-tooltip class="item" effect="dark" content="可自定义设置Header头值" placement="top-start">
                                  <el-button><img src="@a/img/sv12.svg" /></el-button>
                                </el-tooltip>
                              </div>
                              <div class="content_list_dt">
                                <el-input
                                    type="textarea"
                                    :autosize="{ minRows: 4, maxRows: 4}"
                                    placeholder="一行一个，格式：name1:value1"
                                    v-model="info.headers">
                                </el-input>
                              </div>
                            </div>

                            <div class="Edit_content_list">
                              <div class="content_list_dd">
                                文章标题字段
                                <el-tooltip class="item" effect="dark" content="用于关联你的网站系统里的标题对应字段,比如你网站的标题为title,请填写title" placement="top-start">
                                  <el-button><img src="@a/img/sv12.svg" /></el-button>
                                </el-tooltip>
                              </div>
                              <div class="content_list_dt">
                                <el-input
                                    placeholder="用于关联你的网站系统里的标题对应字段,比如你网站的标题为name,请填写name"
                                    v-model="info.title_field"
                                    clearable>
                                </el-input>
                              </div>
                            </div>
                            <div class="Edit_content_list">
                              <div class="content_list_dd">
                                文章栏目字段
                                <el-tooltip class="item" effect="dark" content="用于关联你的网站系统里的栏目字段,比如你网站的栏目字段为classid请填写classid" placement="top-start">
                                  <el-button><img src="@a/img/sv12.svg" /></el-button>
                                </el-tooltip>
                              </div>
                              <div class="content_list_dt">
                                <el-input
                                    placeholder="用于关联你的网站系统里的栏目字段,比如你网站的栏目字段为classid请填写classid"
                                    v-model="info.column_field"
                                    clearable>
                                </el-input>
                              </div>
                            </div>
                            <div class="Edit_content_list">
                              <div class="content_list_dd">
                                缩略图字段
                                <el-tooltip class="item" effect="dark" content="用于关联你的网站系统里的图片对应字段,比如你网站的图片为thumb,请填写thumb" placement="top-start">
                                  <el-button><img src="@a/img/sv12.svg" /></el-button>
                                </el-tooltip>
                              </div>
                              <div class="content_list_dt">
                                <el-input
                                    placeholder="用于关联你的网站系统里的图片对应字段,比如你网站的图片为thumb,请填写thumb"
                                    v-model="info.thumbnail_field"
                                    clearable>
                                </el-input>
                              </div>
                            </div>
                            <div class="Edit_content_list">
                              <div class="content_list_dd">
                                文章时间字段
                                <el-tooltip class="item" effect="dark" content="用于关联你的网站系统里的时间对应字段,比如你网站的时间为addtime,请填写addtime" placement="top-start">
                                  <el-button><img src="@a/img/sv12.svg" /></el-button>
                                </el-tooltip>
                              </div>
                              <div class="content_list_dt">
                                <el-input
                                    placeholder="用于关联你的网站系统里的时间对应字段,比如你网站的时间为addtime,请填写addtime"
                                    v-model="info.create_time_field"
                                    clearable>
                                </el-input>
                              </div>
                            </div>
							
                            <div class="Edit_content_list">
                              <div class="content_list_dd">
                                tag字段
                                <el-tooltip class="item" effect="dark" content="用于关联你的网站系统里的tag对应字段,比如你网站的tag字段为tag,请填写tag" placement="top-start">
                                  <el-button><img src="@a/img/sv12.svg" /></el-button>
                                </el-tooltip>
                              </div>
                              <div class="content_list_dt">
                                <el-input
                                    placeholder="用于关联你的网站系统里的tag对应字段,比如你网站的tag字段为tag,请填写tag"
                                    v-model="info.tags_field"
                                    clearable>
                                </el-input>
                              </div>
                            </div>								
							
                            <div class="Edit_content_list">
                              <div class="content_list_dd">
                                keywords字段
                                <el-tooltip class="item" effect="dark" content="用于关联你的网站系统里的关键词字段对应字段,比如你网站的关键词字段为keywords,请填写keywords" placement="top-start">
                                  <el-button><img src="@a/img/sv12.svg" /></el-button>
                                </el-tooltip>
                              </div>
                              <div class="content_list_dt">
                                <el-input
                                    placeholder="用于关联你的网站系统里的关键词字段对应字段,比如你网站的关键词字段为keywords,请填写keywords"
                                    v-model="info.keywords_field"
                                    clearable>
                                </el-input>
                              </div>
                            </div>	
							
                            <div class="Edit_content_list">
                              <div class="content_list_dd">
                                description字段
                                <el-tooltip class="item" effect="dark" content="用于关联你的网站系统里的关键词字段对应字段,比如你网站的关键词字段为description,请填写description" placement="top-start">
                                  <el-button><img src="@a/img/sv12.svg" /></el-button>
                                </el-tooltip>
                              </div>
                              <div class="content_list_dt">
                                <el-input
                                    placeholder="用于关联你的网站系统里的关键词字段对应字段,比如你网站的关键词字段为description,请填写description"
                                    v-model="info.description_field"
                                    clearable>
                                </el-input>
                              </div>
                            </div>								
													
                            <div class="Edit_content_list">
                              <div class="content_list_dd">
                                description截取长度
                                <el-tooltip class="item" effect="dark" content="根据设置的长度来截取文章内容做为description" placement="top-start">
                                  <el-button><img src="@a/img/sv12.svg" /></el-button>
                                </el-tooltip>
                              </div>
                              <div class="content_list_dt">
                                <el-input
                                    placeholder="根据设置的长度来截取文章内容做为description,建议填写200"
                                    v-model="info.description_length"
                                    clearable>
                                </el-input>
                              </div>
                            </div>														

                            <div class="Edit_content_list">
                              <div class="content_list_dd">
                                文章内容字段
                                <el-tooltip class="item" effect="dark" content="用于关联你的网站系统里的文章内容对应字段,比如你网站的文章内容字段为content,请填写content" placement="top-start">
                                  <el-button><img src="@a/img/sv12.svg" /></el-button>
                                </el-tooltip>
                              </div>
                              <div class="content_list_dt">
                                <el-input
                                    placeholder="用于关联你的网站系统里的文章内容对应字段,比如你网站的文章内容字段为content,请填写content"
                                    v-model="info.article_content_field"
                                    clearable>
                                </el-input>
                              </div>
                            </div>

                            <div class="Edit_content_list fstart">
                              <div class="content_list_dd">
                                其它字段
                                <el-tooltip class="item" effect="dark" content="针对一些补充字段,可以在这里设置" placement="top-start">
                                  <el-button><img src="@a/img/sv12.svg" /></el-button>
                                </el-tooltip>
                              </div>
                              <div class="content_list_dt">
                                <el-input
                                    type="textarea"
                                    :autosize="{ minRows: 4, maxRows: 4}"
                                    placeholder=" 一行一个，格式：name1:value1"
                                    v-model="info.other_fields">
                                </el-input>
                              </div>
                            </div>
                            <div class="Edit_content_list">
                              <div class="content_list_dd">
                                发布成功标志
                                <el-tooltip class="item" effect="dark" content="用于和网站系统接口对接使用的,以此来判断是否发布成功,接口返回的内容只要包含对应的发布成功标志即可." placement="top-start">
                                  <el-button><img src="@a/img/sv12.svg" /></el-button>
                                </el-tooltip>
                              </div>
                              <div class="content_list_dt">
                                <el-input
                                    placeholder="默认返回的http状态码200就表示发布成功，其他请填写包含的关键词"
                                    v-model="info.publish_success_flag"
                                    clearable>
                                </el-input>
                              </div>
                            </div>
                            </div>
                          <div class="Edit_content_btn">
                            <div class="content_btn_li" v-show="isShow" v-on:click="isShow = false"><i class="el-icon-caret-bottom"></i>展开高级设置</div>
                            <div class="content_btn_li" v-show="!isShow" v-on:click="isShow = true"><i class="el-icon-caret-top"></i>收起高级设置</div>
                          </div>
                          <div class="Edit_btn">
                              <button class="back" @click="goOff()">上一步</button>
                              <button class="save" @click="save">下一步</button>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
      </div>
  </div>
</template>

<script>
  import Nav from "@c/common/nav/nav";

  export default {
      name: "parametersettings",
      data() {
          return {
              isShow: true ,
              testData:{
                title: '',
                url: '',
                catid: '',
                newstime: '',
                content: ''
              },
              fullscreenLoading: false,
              info: {
                website: '',
				description_length:200,
              },
              site_classes: [],
              showPreview: false,


              pickerOptions: {
              disabledDate(time) {
                  return time.getTime() > Date.now();
              },
              shortcuts: [{
                  text: '今天',
                  onClick(picker) {
                  picker.$emit('pick', new Date());
                  }
              }, {
                  text: '昨天',
                  onClick(picker) {
                  const date = new Date();
                  date.setTime(date.getTime() - 3600 * 1000 * 24);
                  picker.$emit('pick', date);
                  }
              }, {
                  text: '一周前',
                  onClick(picker) {
                  const date = new Date();
                  date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                  picker.$emit('pick', date);
                  }
              }]
              },
            demo_name: '',
            demo_logo: '',
            siteSelect: '2',
          };
      },
      components: {
          Nav
      },
      methods:{
        handleInput(value) {
          // 判断输入框的值是否包含http、https或/字符
          if (value.indexOf('http') !== -1 || value.indexOf('https') !== -1 || value.indexOf('/') !== -1) {
            // 使用replace方法将这些字符串替换为空字符串
            value = value.replace(/http[s]?:\/\//i, '').replace(/\//g, '');
          }
          // 更新info.website变量的值
          this.info.website = value;
        },
        testPush(){
            let that = this;
            that.axios.post('/api/site/testPush', {
              'site' : that.info,
              'data' : that.testData
            }).then(res => {
              if(res.code === 1) {
                that.$msgbox('测试发布成功','提示')
              }else{
                that.$msgbox(res.result, '测试发布失败')
              }
            })
        },
        toTest(){
         let that = this;
          this.axios.post('/api/site/getClassesByUrl', {
            website: that.info.website,
            url:  that.info.website + that.info.column_interface
          }).then(res => {
            if(res.code === 1) {
              that.site_classes = res.result
              that.testData.url = that.info.website + that.info.publishing_interface
              that.showPreview = true
            }else{
              that.$msgbox(res.result, '获取栏目错误')
            }
          })

        },
        save(){
          let that = this;
          let info = that.info;
          info.secret_key = that.$route.query.key;

          //loading
          const loading = this.$loading({
            lock: true,
            text: 'Loading...',
            spinner: 'el-icon-loading',
            background: 'rgba(255, 255, 255, 0.7)'
          });
          that.axios.post('/api/site/add', info).then(res => {
            if(res.code === 1) {
              this.$router.push({path:'/writing/siteManagement/addedSuccessfully?id=' + res.result.id})
            }

            //关闭loading
            loading.close();
          })
        },
      goOff(){

          if(this.$route.query.key && this.$route.query.id){
            this.$router.push({
              path: '/writing/siteManagement/parameterSettings?id=' + this.$route.query.id + '&key=' + this.$route.query.key
            })
          }else{
            this.$router.push({
              path: '/writing/siteManagement/parameterSettings?sid=' + this.$route.query.sid + '&key=' + this.$route.query.key
            })
          }
      },
      advancedClick(){
          this.advanced = !this.advanced
        },


        getData(){
          let that = this;
            let id = this.$route.query.id
            if(id) {
              that.axios.get('/api/site/getDemo', {
                params: {
                  id
                }
              }).then(res => {
                if(res.code === 1) {
                  let info = res.result;
				  that.description_length=200;
                  that.demo_name = info.name;
                  that.demo_logo= info.logo_image
                  info.name = '';
				  info.description_length=200;
                  info.secret_key = that.$route.query.key;
                  info.is_https = '0';
                  info.site_demo_id = this.$route.query.id;
                  delete info.id;
                  delete info.logo_image;
                  delete info.pubid;
                  that.info = info
                  if(info.column_interface) {
                    that.isShow = true
                  }else{
                    that.isShow = false
                  }

                }
              })
            }else{
              id = this.$route.query.sid
              if(id){
				//获取站点信息
                that.axios.get('/api/site/getSite', {
                  params: {
                    id
                  }
                }).then(res => {
                  if(res.code === 1) {
                    that.info = res.result;
                    that.info.is_https = that.info.is_https + ''
					//获取站点对应site_demo信息
					  that.axios.get('/api/site/getDemo', {
						params: {
						  id:res.result.site_demo_id
						}
					  }).then(res => {
						if(res.code === 1) {
						  let info = res.result;
						  that.demo_name = info.name;
						  that.demo_logo= info.logo_image

						}
					  })					
					
					
                  }
                })
              }

            }

        }
      },
      created() {
        this.getData()
      },
  }
</script>

<style>
@import "websiteInformation.css";
</style>
